<script setup>
	import {User, Lock, Postcard} from '@element-plus/icons-vue'
	import {ref} from "vue";
	import {userApi} from "@/api/user.js";
	import {ElMessage} from "element-plus";
	
	const user = ref({
		name: '',
		password: '',
		captcha: ''
	})
	
	//表单正则表达式验证
	const rules = ref({
		name: [
			{required: true, message: '请输入用户名', trigger: 'blur'},
			{min: 2, max: 16, message: '用户名的长度必须为2~16位', trigger: 'blur'}
		],
		password: [
			{required: true, message: '请输入密码', trigger: 'blur'},
			{min: 3, max: 16, message: '密码长度必须为3~16位', trigger: 'blur'}
		]
	})
	
	import {useRouter} from 'vue-router'
	
	const router = useRouter()
	import {useTokenStore} from "@/store/token.js";
	
	import captchaApi from "@/api/captcha.js";
	
	const tokenStore = useTokenStore()
	
	const captcha = ref('')
	const loadCaptcha = () => {
		captchaApi.captcha().then(result => {
			captcha.value = result.data
		})
	}
	
	loadCaptcha()
	
	const formRef = ref()
	const login = (formEl) => {
		if (!formEl) return
		formEl.validate((valid) => {
			if (valid) {
				userApi.login(user.value).then(result => {
					if (result.code === 0) {
						ElMessage.success(result.msg)
						//将得到的token存到pinia中
						tokenStore.setToken(result.data, remember.value)
						setTimeout(function () {
							router.push('/')
						}, 1200)
					} else {
						ElMessage.error(result.msg)
						loadCaptcha()
					}
				})
			} else {
				ElMessage.error("验证失败！无法登录")
			}
		})
	}
	
	//记录是不是勾选记住密码
	const remember = ref(false)
</script>

<template>
	<div class="login-container">
		<div class="login-panel">
			<div align="center"><img class="login-image" style="width: 310px" src="@/assets/logo.png" alt="logo"/></div>
			<div class="login-title">用户登录</div>
			<el-form :model="user" status-icon ref="formRef" size="large" autocomplete="off"
					 class="demo-ruleForm form-login" :rules="rules">
				<el-form-item prop="name" class="input-font">
					<el-input class="input-font" :prefix-icon="User"
							  v-model="user.name"
							  auto-complete="off"
							  placeholder="请输入用户名"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input class="input-font" type="password" name="password" :prefix-icon="Lock" show-password
							  v-model="user.password"
							  auto-complete="off"
							  placeholder="请输入密码"
					></el-input>
				</el-form-item>
				<el-form-item prop="captcha">
					<el-col :span="18">
						<el-input class="input-font" name="captcha" :prefix-icon="Postcard" type="text"
								  placeholder="请输入验证码"
								  v-model="user.captcha" clearable></el-input>
					</el-col>
					<el-col :span="6"><img width="160px" :src="captcha" @click="loadCaptcha" alt="验证码"/></el-col>
				</el-form-item>
				<el-form-item class="flex">
					<el-checkbox
						v-model="remember"
						class="rememberme button-font"
					>七天内免登录
					</el-checkbox>
<!--					<el-link class="button-font" type="primary" :underline="false">忘记密码？</el-link>-->
				</el-form-item>
				<el-form-item style="width:100%;">
					<el-button class="button-font" type="primary" style="width:100%;" @click="login(formRef)">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>


<style lang="scss" scoped>
	.login-container {
		background: url("@/assets/bg.png") no-repeat center center;
		height: 100%;
		width: 100%;
		background-size: cover;
		position: absolute;
		left: 0;
		top: 0;
		
		.login-panel {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			
			padding: 25px;
			width: 26%;
			min-width: 600px;
			height: 30%;
			min-height: 450px;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 5%;
			box-shadow: 2px 2px 10px #ddd;
			
			.input-font {
				font-size: 18px;
				background: rgba(255, 255, 255, 0.4);
			}
			
			.button-font {
				font-size: 18px;
			}
			
			.login-title {
				font-size: 28px;
				text-align: center;
				margin-bottom: 24px;
			}
			
			.login-image {
				display: inline-block;
				margin: 0 auto;
			}
		}
	}
</style>
